<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教育题库管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        warning: '#FF9F43',
                        danger: '#FF5C5C',
                        neutral: {
                            100: '#F8FAFC',
                            200: '#E2E8F0',
                            300: '#CBD5E1',
                            400: '#94A3B8',
                            500: '#64748B',
                            600: '#475569',
                            700: '#334155',
                            800: '#1E293B',
                            900: '#0F172A',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 10px 30px rgba(22, 93, 255, 0.08)',
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 rounded-lg text-neutral-500 hover:bg-primary/5 hover:text-primary transition-all duration-200;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .btn-secondary {
                @apply bg-white border border-neutral-200 hover:border-primary/30 text-neutral-700 font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }
            .card {
                @apply bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 overflow-hidden;
            }
            .badge {
                @apply text-xs font-medium px-2.5 py-0.5 rounded-full;
            }
            .form-input {
                @apply block w-full px-3 py-2 border border-neutral-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .table-cell {
                @apply px-6 py-4 whitespace-nowrap text-sm;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm z-10">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- 左侧logo和标题 -->
                <div class="flex items-center">
                    <button id="sidebar-toggle" class="mr-4 text-neutral-500 hover:text-primary lg:hidden">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <a href="#" class="flex items-center space-x-2">
                        <div class="bg-primary text-white p-2 rounded-lg">
                            <i class="fa fa-book text-xl"></i>
                        </div>
                        <span class="text-xl font-bold text-neutral-800">题库管理系统</span>
                    </a>
                </div>
                
                <!-- 右侧用户信息和操作 -->
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <button class="p-2 text-neutral-500 hover:text-primary hover:bg-neutral-100 rounded-full transition-colors">
                            <i class="fa fa-bell-o text-xl"></i>
                            <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                        </button>
                    </div>
                    <div class="relative">
                        <button class="p-2 text-neutral-500 hover:text-primary hover:bg-neutral-100 rounded-full transition-colors">
                            <i class="fa fa-cog text-xl"></i>
                        </button>
                    </div>
                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm">
                        <div class="hidden md:block">
                            <p class="text-sm font-medium text-neutral-700">王老师</p>
                            <p class="text-xs text-neutral-500">高级管理员</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边栏 -->
        <aside id="sidebar" class="w-64 bg-white shadow-md z-10 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out fixed lg:relative h-[calc(100vh-4rem)] overflow-y-auto">
            <nav class="py-4">
                <div class="px-4 py-3 mb-4">
                    <h2 class="text-xs font-semibold text-neutral-400 uppercase tracking-wider">主菜单</h2>
                </div>
                
                <a href="#" class="sidebar-item active">
                    <i class="fa fa-dashboard text-lg"></i>
                    <span>仪表盘</span>
                </a>
                
                <a href="#" class="sidebar-item">
                    <i class="fa fa-list-alt text-lg"></i>
                    <span>题库管理</span>
                </a>
                
                <a href="#" class="sidebar-item">
                    <i class="fa fa-file-text-o text-lg"></i>
                    <span>试卷管理</span>
                </a>
                
                <a href="#" class="sidebar-item">
                    <i class="fa fa-users text-lg"></i>
                    <span>用户管理</span>
                </a>
                
                <a href="#" class="sidebar-item">
                    <i class="fa fa-line-chart text-lg"></i>
                    <span>数据分析</span>
                </a>
                
                <div class="px-4 py-3 mt-6 mb-4">
                    <h2 class="text-xs font-semibold text-neutral-400 uppercase tracking-wider">系统设置</h2>
                </div>
                
                <a href="#" class="sidebar-item">
                    <i class="fa fa-cog text-lg"></i>
                    <span>系统配置</span>
                </a>
                
                <a href="#" class="sidebar-item">
                    <i class="fa fa-tags text-lg"></i>
                    <span>标签管理</span>
                </a>
                
                <a href="#" class="sidebar-item">
                    <i class="fa fa-area-chart text-lg"></i>
                    <span>统计报表</span>
                </a>
                
                <a href="#" class="sidebar-item">
                    <i class="fa fa-question-circle text-lg"></i>
                    <span>帮助中心</span>
                </a>
            </nav>
        </aside>

        <!-- 遮罩层 -->
        <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-5 lg:hidden hidden"></div>

        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto p-6">
            <div class="container mx-auto">
                <!-- 页面标题 -->
                <div class="mb-8">
                    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-800">题库管理仪表盘</h1>
                    <p class="text-neutral-500 mt-1">欢迎回来，王老师！今天是2025年7月13日</p>
                </div>
                
                <!-- 数据概览卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="card">
                        <div class="p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-neutral-500 text-sm font-medium">总题目数</p>
                                    <h3 class="text-3xl font-bold text-neutral-800 mt-1">12,543</h3>
                                    <p class="text-secondary text-sm mt-2 flex items-center">
                                        <i class="fa fa-arrow-up mr-1"></i> 8.2% <span class="text-neutral-500 ml-1">较上月</span>
                                    </p>
                                </div>
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary">
                                    <i class="fa fa-question-circle text-xl"></i>
                                </div>
                            </div>
                        </div>
                        <div class="px-6 py-3 bg-neutral-50 border-t border-neutral-100">
                            <a href="#" class="text-primary text-sm font-medium hover:underline flex items-center">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-neutral-500 text-sm font-medium">本月新增</p>
                                    <h3 class="text-3xl font-bold text-neutral-800 mt-1">876</h3>
                                    <p class="text-secondary text-sm mt-2 flex items-center">
                                        <i class="fa fa-arrow-up mr-1"></i> 12.5% <span class="text-neutral-500 ml-1">较上月</span>
                                    </p>
                                </div>
                                <div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center text-secondary">
                                    <i class="fa fa-plus-circle text-xl"></i>
                                </div>
                            </div>
                        </div>
                        <div class="px-6 py-3 bg-neutral-50 border-t border-neutral-100">
                            <a href="#" class="text-primary text-sm font-medium hover:underline flex items-center">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-neutral-500 text-sm font-medium">试卷总数</p>
                                    <h3 class="text-3xl font-bold text-neutral-800 mt-1">456</h3>
                                    <p class="text-secondary text-sm mt-2 flex items-center">
                                        <i class="fa fa-arrow-up mr-1"></i> 5.3% <span class="text-neutral-500 ml-1">较上月</span>
                                    </p>
                                </div>
                                <div class="w-12 h-12 bg-warning/10 rounded-full flex items-center justify-center text-warning">
                                    <i class="fa fa-file-text-o text-xl"></i>
                                </div>
                            </div>
                        </div>
                        <div class="px-6 py-3 bg-neutral-50 border-t border-neutral-100">
                            <a href="#" class="text-primary text-sm font-medium hover:underline flex items-center">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-neutral-500 text-sm font-medium">活跃用户</p>
                                    <h3 class="text-3xl font-bold text-neutral-800 mt-1">28</h3>
                                    <p class="text-danger text-sm mt-2 flex items-center">
                                        <i class="fa fa-arrow-down mr-1"></i> 3.1% <span class="text-neutral-500 ml-1">较上月</span>
                                    </p>
                                </div>
                                <div class="w-12 h-12 bg-danger/10 rounded-full flex items-center justify-center text-danger">
                                    <i class="fa fa-users text-xl"></i>
                                </div>
                            </div>
                        </div>
                        <div class="px-6 py-3 bg-neutral-50 border-t border-neutral-100">
                            <a href="#" class="text-primary text-sm font-medium hover:underline flex items-center">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 图表区域 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    <div class="card lg:col-span-2">
                        <div class="p-6">
                            <div class="flex items-center justify-between mb-6">
                                <h3 class="font-semibold text-lg text-neutral-800">题目增长趋势</h3>
                                <div class="flex space-x-2">
                                    <button class="btn-secondary text-xs py-1 px-3">周</button>
                                    <button class="btn-primary text-xs py-1 px-3">月</button>
                                    <button class="btn-secondary text-xs py-1 px-3">年</button>
                                </div>
                            </div>
                            <div class="h-80">
                                <canvas id="questionsChart"></canvas>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="p-6">
                            <div class="flex items-center justify-between mb-6">
                                <h3 class="font-semibold text-lg text-neutral-800">题目类型分布</h3>
                                <button class="text-primary text-sm hover:underline">
                                    <i class="fa fa-ellipsis-v"></i>
                                </button>
                            </div>
                            <div class="h-80">
                                <canvas id="questionTypesChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 题目管理区域 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    <div class="card lg:col-span-2">
                        <div class="p-6">
                            <div class="flex items-center justify-between mb-6">
                                <h3 class="font-semibold text-lg text-neutral-800">最近更新题目</h3>
                                <div class="flex items-center space-x-2">
                                    <div class="relative">
                                        <input type="text" placeholder="搜索题目..." class="form-input pl-9 text-sm py-1.5">
                                        <i class="fa fa-search absolute left-3 top-2.5 text-neutral-400"></i>
                                    </div>
                                    <button class="btn-primary text-sm py-1.5">
                                        <i class="fa fa-plus mr-1"></i> 新建题目
                                    </button>
                                </div>
                            </div>
                            
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-neutral-200">
                                    <thead class="bg-neutral-50">
                                        <tr>
                                            <th scope="col" class="table-cell font-medium text-neutral-600 text-left">题目ID</th>
                                            <th scope="col" class="table-cell font-medium text-neutral-600 text-left">题目内容</th>
                                            <th scope="col" class="table-cell font-medium text-neutral-600 text-left">题型</th>
                                            <th scope="col" class="table-cell font-medium text-neutral-600 text-left">难度</th>
                                            <th scope="col" class="table-cell font-medium text-neutral-600 text-left">更新时间</th>
                                            <th scope="col" class="table-cell font-medium text-neutral-600 text-right">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-neutral-200">
                                        <tr class="hover:bg-neutral-50 transition-colors">
                                            <td class="table-cell text-neutral-600">#Q-10245</td>
                                            <td class="table-cell">
                                                <div class="max-w-xs truncate text-neutral-700">已知二次函数y=ax²+bx+c的图像经过点(1,3)，(2,6)，(3,11)，求a，b，c的值。</div>
                                            </td>
                                            <td class="table-cell">
                                                <span class="badge bg-primary/10 text-primary">解答题</span>
                                            </td>
                                            <td class="table-cell">
                                                <span class="badge bg-warning/10 text-warning">中等</span>
                                            </td>
                                            <td class="table-cell text-neutral-500">2025-07-12</td>
                                            <td class="table-cell text-right">
                                                <div class="flex items-center justify-end space-x-2">
                                                    <button class="text-neutral-500 hover:text-primary p-1" title="编辑">
                                                        <i class="fa fa-pencil"></i>
                                                    </button>
                                                    <button class="text-neutral-500 hover:text-danger p-1" title="删除">
                                                        <i class="fa fa-trash-o"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50 transition-colors">
                                            <td class="table-cell text-neutral-600">#Q-10244</td>
                                            <td class="table-cell">
                                                <div class="max-w-xs truncate text-neutral-700">下列哪个是Python的内置函数？A) add() B) sum() C) plus() D) minus()</div>
                                            </td>
                                            <td class="table-cell">
                                                <span class="badge bg-secondary/10 text-secondary">单选题</span>
                                            </td>
                                            <td class="table-cell">
                                                <span class="badge bg-secondary/10 text-secondary">简单</span>
                                            </td>
                                            <td class="table-cell text-neutral-500">2025-07-12</td>
                                            <td class="table-cell text-right">
                                                <div class="flex items-center justify-end space-x-2">
                                                    <button class="text-neutral-500 hover:text-primary p-1" title="编辑">
                                                        <i class="fa fa-pencil"></i>
                                                    </button>
                                                    <button class="text-neutral-500 hover:text-danger p-1" title="删除">
                                                        <i class="fa fa-trash-o"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50 transition-colors">
                                            <td class="table-cell text-neutral-600">#Q-10243</td>
                                            <td class="table-cell">
                                                <div class="max-w-xs truncate text-neutral-700">简述光合作用的过程及其重要性。</div>
                                            </td>
                                            <td class="table-cell">
                                                <span class="badge bg-primary/10 text-primary">解答题</span>
                                            </td>
                                            <td class="table-cell">
                                                <span class="badge bg-danger/10 text-danger">困难</span>
                                            </td>
                                            <td class="table-cell text-neutral-500">2025-07-11</td>
                                            <td class="table-cell text-right">
                                                <div class="flex items-center justify-end space-x-2">
                                                    <button class="text-neutral-500 hover:text-primary p-1" title="编辑">
                                                        <i class="fa fa-pencil"></i>
                                                    </button>
                                                    <button class="text-neutral-500 hover:text-danger p-1" title="删除">
                                                        <i class="fa fa-trash-o"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50 transition-colors">
                                            <td class="table-cell text-neutral-600">#Q-10242</td>
                                            <td class="table-cell">
                                                <div class="max-w-xs truncate text-neutral-700">已知方程组：2x + 3y = 12，4x - y = 5，求解x和y的值。</div>
                                            </td>
                                            <td class="table-cell">
                                                <span class="badge bg-primary/10 text-primary">解答题</span>
                                            </td>
                                            <td class="table-cell">
                                                <span class="badge bg-warning/10 text-warning">中等</span>
                                            </td>
                                            <td class="table-cell text-neutral-500">2025-07-10</td>
                                            <td class="table-cell text-right">
                                                <div class="flex items-center justify-end space-x-2">
                                                    <button class="text-neutral-500 hover:text-primary p-1" title="编辑">
                                                        <i class="fa fa-pencil"></i>
                                                    </button>
                                                    <button class="text-neutral-500 hover:text-danger p-1" title="删除">
                                                        <i class="fa fa-trash-o"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50 transition-colors">
                                            <td class="table-cell text-neutral-600">#Q-10241</td>
                                            <td class="table-cell">
                                                <div class="max-w-xs truncate text-neutral-700">以下哪个是JavaScript的内置对象？A) Window B) Document C) Console D) 以上都是</div>
                                            </td>
                                            <td class="table-cell">
                                                <span class="badge bg-secondary/10 text-secondary">单选题</span>
                                            </td>
                                            <td class="table-cell">
                                                <span class="badge bg-secondary/10 text-secondary">简单</span>
                                            </td>
                                            <td class="table-cell text-neutral-500">2025-07-10</td>
                                            <td class="table-cell text-right">
                                                <div class="flex items-center justify-end space-x-2">
                                                    <button class="text-neutral-500 hover:text-primary p-1" title="编辑">
                                                        <i class="fa fa-pencil"></i>
                                                    </button>
                                                    <button class="text-neutral-500 hover:text-danger p-1" title="删除">
                                                        <i class="fa fa-trash-o"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <div class="flex items-center justify-between mt-6">
                                <p class="text-sm text-neutral-500">显示 1 至 5 条，共 12,543 条</p>
                                <div class="flex space-x-1">
                                    <button class="btn-secondary px-3 py-1 text-sm rounded-l-lg">上一页</button>
                                    <button class="bg-primary text-white px-3 py-1 text-sm">1</button>
                                    <button class="btn-secondary px-3 py-1 text-sm">2</button>
                                    <button class="btn-secondary px-3 py-1 text-sm">3</button>
                                    <button class="btn-secondary px-3 py-1 text-sm rounded-r-lg">下一页</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="p-6">
                            <div class="flex items-center justify-between mb-6">
                                <h3 class="font-semibold text-lg text-neutral-800">热门标签</h3>
                                <button class="text-primary text-sm hover:underline">
                                    管理标签
                                </button>
                            </div>
                            
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-tag"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-neutral-800">数学</h4>
                                            <p class="text-xs text-neutral-500">3,245 道题目</p>
                                        </div>
                                    </div>
                                    <div class="w-3/5">
                                        <div class="h-2 bg-neutral-200 rounded-full overflow-hidden">
                                            <div class="h-full bg-primary rounded-full" style="width: 85%"></div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary mr-3">
                                            <i class="fa fa-tag"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-neutral-800">语文</h4>
                                            <p class="text-xs text-neutral-500">2,876 道题目</p>
                                        </div>
                                    </div>
                                    <div class="w-3/5">
                                        <div class="h-2 bg-neutral-200 rounded-full overflow-hidden">
                                            <div class="h-full bg-secondary rounded-full" style="width: 75%"></div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning mr-3">
                                            <i class="fa fa-tag"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-neutral-800">英语</h4>
                                            <p class="text-xs text-neutral-500">2,451 道题目</p>
                                        </div>
                                    </div>
                                    <div class="w-3/5">
                                        <div class="h-2 bg-neutral-200 rounded-full overflow-hidden">
                                            <div class="h-full bg-warning rounded-full" style="width: 65%"></div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center text-danger mr-3">
                                            <i class="fa fa-tag"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-neutral-800">物理</h4>
                                            <p class="text-xs text-neutral-500">1,876 道题目</p>
                                        </div>
                                    </div>
                                    <div class="w-3/5">
                                        <div class="h-2 bg-neutral-200 rounded-full overflow-hidden">
                                            <div class="h-full bg-danger rounded-full" style="width: 50%"></div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500 mr-3">
                                            <i class="fa fa-tag"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-neutral-800">化学</h4>
                                            <p class="text-xs text-neutral-500">1,567 道题目</p>
                                        </div>
                                    </div>
                                    <div class="w-3/5">
                                        <div class="h-2 bg-neutral-200 rounded-full overflow-hidden">
                                            <div class="h-full bg-purple-500 rounded-full" style="width: 42%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mt-6">
                                <h4 class="font-medium text-neutral-800 mb-3">快速添加标签</h4>
                                <div class="flex items-center">
                                    <input type="text" placeholder="输入标签名称" class="form-input text-sm py-1.5 flex-1 mr-2">
                                    <button class="btn-primary text-sm py-1.5">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 底部区域 -->
                <div class="flex items-center justify-between text-sm text-neutral-500 py-4 border-t border-neutral-200">
                    <p>© 2025 教育题库管理系统. 保留所有权利.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="hover:text-primary">使用条款</a>
                        <a href="#" class="hover:text-primary">隐私政策</a>
                        <a href="#" class="hover:text-primary">帮助中心</a>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // 侧边栏切换
        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('sidebar-overlay');
            
            sidebar.classList.toggle('-translate-x-full');
            overlay.classList.toggle('hidden');
        });
        
        document.getElementById('sidebar-overlay').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('sidebar-overlay');
            
            sidebar.classList.add('-translate-x-full');
            overlay.classList.add('hidden');
        });
        
        // 图表初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 题目增长趋势图表
            const questionsCtx = document.getElementById('questionsChart').getContext('2d');
            const questionsChart = new Chart(questionsCtx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                    datasets: [
                        {
                            label: '数学',
                            data: [180, 210, 240, 230, 260, 290, 320],
                            borderColor: '#165DFF',
                            backgroundColor: 'rgba(22, 93, 255, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '语文',
                            data: [150, 170, 190, 200, 220, 230, 250],
                            borderColor: '#36D399',
                            backgroundColor: 'rgba(54, 211, 153, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '英语',
                            data: [120, 140, 160, 170, 190, 210, 220],
                            borderColor: '#FF9F43',
                            backgroundColor: 'rgba(255, 159, 67, 0.1)',
                            tension: 0.4,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                usePointStyle: true,
                                boxWidth: 6
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            titleColor: '#1E293B',
                            bodyColor: '#64748B',
                            borderColor: 'rgba(203, 213, 225, 0.5)',
                            borderWidth: 1,
                            padding: 12,
                            boxPadding: 6,
                            usePointStyle: true,
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.raw + ' 题';
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                borderDash: [2, 2]
                            },
                            ticks: {
                                callback: function(value) {
                                    return value;
                                }
                            }
                        }
                    },
                    elements: {
                        point: {
                            radius: 3,
                            hoverRadius: 5
                        }
                    }
                }
            });
            
            // 题目类型分布图表
            const typesCtx = document.getElementById('questionTypesChart').getContext('2d');
            const typesChart = new Chart(typesCtx, {
                type: 'doughnut',
                data: {
                    labels: ['单选题', '多选题', '判断题', '填空题', '解答题'],
                    datasets: [{
                        data: [35, 20, 15, 10, 20],
                        backgroundColor: [
                            '#36D399',
                            '#165DFF',
                            '#FF9F43',
                            '#9277FF',
                            '#FF5C5C'
                        ],
                        borderWidth: 0,
                        hoverOffset: 5
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                boxWidth: 6,
                                padding: 15
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            titleColor: '#1E293B',
                            bodyColor: '#64748B',
                            borderColor: 'rgba(203, 213, 225, 0.5)',
                            borderWidth: 1,
                            padding: 12,
                            boxPadding: 6,
                            usePointStyle: true,
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ${percentage}% (${value}题)`;
                                }
                            }
                        }
                    },
                    cutout: '65%'
                }
            });
        });
    </script>
</body>
</html>
    